<template>
	<view class="w-flex-col page">
		<ad unit-id="adunit-0e3b5bf0e59fd6fa" ad-type="video" ad-theme="white" bindload="adLoad" binderror="adError"
			bindclose="adClose">
		</ad>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="2000"
				duration="500">
				<swiper-item v-for="(item, key) in banner" :key="key">
					<view class="swiper-item uni-bg-red">
						<image class="w-shrink-0 image" :src="item.img" mode="widthFix"/>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="main">
			<view class="w-flex-row w-items-center section space-x-30">
				<image class="w-shrink-0 image" src="/static/fujinshangjia/ff950717b085f64cd763836fbcedc489.png" />
				<view class="scroll-text">
					<text class="font_1 text marquee">新商户免费入驻，免费宣传，免费连接wifi</text>
				</view>
				
			</view>
			<!-- <view class="grid">
				<view class="w-flex-col w-items-start w-relative grid-item space-y-4" v-for="(item, index) in category" :key="index">
					<image class="image_2" :src="item.icon" />
					<text class="font_1">{{item.name}}</text>
				</view>
			</view> -->
			<view class="w-flex-col section_2 space-y-22" v-show="false">
				<view class="w-flex-row w-justify-between w-items-center">
						<text :class="[{ bgblue: isActive1}, 'font_1']" @tap="search(1)">距离最近</text>
						<text :class="[{ bgblue: isActive2}, 'font_1']" @tap="search(2)">推荐排序</text>
						<text :class="[{ bgblue: isActive3}, 'font_1']" @tap="search(3)">人气优先</text>
				</view>
			</view>
			<view class="w-flex-col list space-y-20">
				<view class="w-flex-row list-item space-x-9" v-for="(item, index) in merchant" :key="index" @tap="goInfo(item.id)">
					<image class="w-shrink-0 w-self-center image_3"
						:src="item.logo" />
					<view class="w-flex-col w-flex-auto w-self-start group space-y-9">
						<text class="w-self-start font_1 mg3">{{item.merchant_name}}</text>
						<view class="w-flex-row w-items-center">
							<image class="image_4" src="/static/fujinshangjia/a6583240bd3653526581e15881f780da.png" v-for="(item,index) in item.score" :key="index" />
							<text class="font_3 text_4">{{item.score}} 分</text>
						</view>
						<text class="font_3">地址: {{item.address}}</text>
					</view>
					<text class="w-self-center font_2 text_3" style="margin-right: 40rpx;">{{item.remark}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				banner:[],
				merchant:[],
				category:[],
				isActive1:true,
				isActive2:false,
				isActive3:false,
				latitude:'',
				longitude:''
			};
		},
		
		onShow() {
			this.getBanner();
			this.getCategory();
			this.getMerchants();
		},

		methods: {
			adLoad() {
				console.log('视频广告 广告加载成功')
			},
			adError(err) {
				console.error('视频广告 广告加载失败', err)
			},
			adClose() {
				console.log('视频广告 广告关闭')
			},
			goInfo(id){
				// return false
				uni.navigateTo({
					url:"/subpackageA/merchant_info/merchant_info?id="+id
				})
			},
			search(index) {  
				this.isActive1 = false
				this.isActive2 = false
				this.isActive3 = false
				switch (index){
					case 1:
						this.isActive1 = true
						break;
					case 2:
						this.isActive2 = true
						break;
					case 3:
						this.isActive3 = true
						break;
					default:
						break;
				}
				this.getMerchants(index)
			},
			getBanner(){
				this.$http.get('banner', {} ).then(res => {
					// console.log(res.data.data)
					this.banner = res.data.data
				}).catch(err => {
				
				})
			},
			getMerchants(index=1){
				var that = this
				// 获取经纬度
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function (res) {
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						that.$http.get('merchant', {
							params:{
								latitude:that.latitude, 
								longitude:that.longitude,
								type:index
							}
						} ).then(res => {
							// console.log(res.data.data)
							that.merchant = res.data.data
						}).catch(err => {
						
						})
					},
					complete: function(){
						console.log(111)
						that.$http.get('merchant', {
							params:{
								latitude:that.latitude, 
								longitude:that.longitude,
								type:index
							}
						} ).then(res => {
							// console.log(res.data.data)
							that.merchant = res.data.data
						}).catch(err => {
						
						})
					}
				});
			},
			getCategory(){
				this.$http.get('category', {} ).then(res => {
					// console.log(res.data.data)
					this.category = res.data.data
				}).catch(err => {
				
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #f4f4f4;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
		
		.main{
			padding: 15rpx 15rpx 100rpx;
			
			.scroll-text{
				width: 600rpx;
				overflow: hidden;
			}
			
			.marquee {  
			  display: inline-block;  
			  white-space: nowrap;  
			  overflow: hidden;  
			  animation: marquee 8s linear infinite;  
			}  
			  
			@keyframes marquee {  
			  0% { transform: translateX(100%); }  
			  100% { transform: translateX(-100%); }  
			}  
		}

		.section {
			margin: 0 4rpx;
			padding: 12rpx 22rpx;
			background-color: #ffffff;
			border-radius: 10rpx;

			.image {
				width: 58rpx;
				height: 52rpx;
			}

			.text {
				line-height: 27rpx;
			}
		}

		.space-x-30 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-left: 10rpx;
			}
		}

		.grid {
			margin: 14rpx 4rpx 0;
			padding: 12rpx 28rpx 40rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			height: 372rpx;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			column-gap: 70rpx;

			.grid-item {
				padding: 16rpx 0;

				.image_2 {
					width: 96rpx;
					height: 96rpx;
				}
			}

			.space-y-4 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 18rpx;
				}
			}
		}

		.font_1 {
			font-size: 24rpx;
			font-family: SourceHanSansCN;
			color: #000000;
		}

		.section_2 {
			margin-right: 10rpx;
			margin-top: 14rpx;
			padding: 20rpx 30rpx 20rpx 30rpx;
			background-color: #ffffff;
			border-radius: 20rpx;

			.space-x-64 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 128rpx;
				}
			}
		}

		.space-y-22 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 44rpx;
			}
		}

		.list {
			margin-top: 14rpx;
			padding: 0 4rpx;

			.list-item {
				padding: 16rpx 36rpx;
				background-color: #ffffff;
				border-radius: 20rpx;

				.image_3 {
					width: 100rpx;
					height: 100rpx;
				}

				.group {
					margin-top: 16rpx;

					.image_4 {
						width: 30rpx;
						height: 30rpx;
					}

					.image_5 {
						margin-left: 6rpx;
					}

					.image_6 {
						margin-left: 8rpx;
					}

					.image_7 {
						margin-left: 8rpx;
					}

					.font_3 {
						font-size: 24rpx;
						font-family: SourceHanSansCN;
						color: #595959;
					}

					.text_4 {
						margin-left: 16rpx;
					}
				}

				.space-y-9 {
					
					.mg3{
						margin-left: 3rpx;
					}

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 12rpx;
					}
				}

				.font_2 {
					font-family: SourceHanSansCN;
					line-height: 22rpx;
					color: #8799A3;
					font-size: 26rpx;
				}

				.text_3 {
					line-height: 23rpx;
				}
			}

			.space-x-9 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 18rpx;
				}
			}
		}

		.space-y-20 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 10rpx;
			}
		}
	}
	.uni-margin-wrap {
		height:300rpx;
		width: 100%;
	}
	.swiper {
		height: 300rpx;
	}
	.swiper-item {
		display: block;
		height: 100%;
		line-height: 300rpx;
		text-align: center;
		.image{
			width: 100%;
			height: 100%;
		}
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}
	
	.bgblue{
		color: #22b14C!important;
	}

</style>